<template>
    <el-card shadow="always" class="health_card">
        <span class="tip" v-if="!isShow">点击右侧{{ isShow ? '收起' : '展开' }}数据概览 &nbsp; 👉</span>

        <div class="toggle_tip" @click="toggle" :title="isShow ? '收起' : '展开'"></div>

        <!-- <transition name="slide"> -->
        <div class="health_card_content" v-show="isShow">
            <div class="card_num_wrap">
                <overview-num-box class="avarage_wrap" :class="'avarage_wrap_' + numLength" :title="'最新平均分'">
                    <span>{{ overviewData.todayAverage }}<i>分</i></span>
                    <b>数据时间: {{ overviewData.latestTime }}</b>
                </overview-num-box>

                <slot name="cardTopNum"></slot>
            </div>

            <div class="card_item_wrap">
                <slot name="cardItem"></slot>
            </div>
        </div>
        <!-- </transition> -->
    </el-card>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
    average: {
        type: Number,
        default: 0,
        required: true
    },
    numLength: {
        type: Number,
        default: 0,
    },
    overviewData: {
        type: Object,
        default: () => { },
    },
})

const isShow = ref(true)

const toggle = () => {
    isShow.value = !isShow.value
}
</script>

<style lang="scss" scoped>
.health_card {
    position: relative;
    margin-bottom: 10px;

    :deep .el-card__body {
        padding: 0 !important;
    }

    .tip {
        display: block;
        padding: 11px 0 12px 15px;
        font-size: 14px;
    }

    .toggle_tip {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 18px;
        height: 18px;
        background: url('../../assets/icons/svg/expand.svg') top no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
    }

    .health_card_content {
        display: flex;
        margin: 16px 0 6px 20px;
        padding: 0 18px 12px 10px;
        width: 95%;
        min-height: 100px;
        overflow-x: auto;
        overflow-y: hidden;


        .card_num_wrap {
            width: 18%;
            min-width: 200px;
            min-height: 93px;
            margin-right: 20px;

            :deep .overview_num_box {
                &.avarage_wrap {
                    position: relative;
                    width: 100%;
                    height: 48%;
                    margin-bottom: 15px;
                    // padding-left: 35%;

                    .box_wrap {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                    }

                    &_1 {
                        height: 100%;
                        padding-top: 66px;

                        h3 {
                            margin-bottom: 20px;
                            font-size: 20px;
                        }

                        span {
                            font-size: 30px;
                        }
                    }

                    &_2 {
                        &+.overview_num_box {
                            width: 100%;

                            h3,
                            span {
                                display: block;
                                text-align: center;
                            }
                        }
                    }

                    &_3 {
                        margin-bottom: 20px;
                        // padding: 22px;

                        &~.overview_num_box {
                            padding: 20px 8px;
                        }
                    }

                    h3,
                    b,
                    span {
                        display: block;
                        margin: 0;
                    }

                    h3,
                    b {
                        font-weight: initial;
                        font-size: 12px;
                        color: #606266;
                    }

                    span {
                        font-size: 30px;
                        margin: 6px 0;

                        i {
                            font-size: 13px;
                            color: #606266;
                            margin-left: 3px;
                        }
                    }
                }

                &:not(.avarage_wrap) {
                    width: 47.5%;

                    &:not(:last-child) {
                        margin-right: 10px;
                    }
                }
            }

        }

        .card_item_wrap {
            flex: 1;
            display: flex;
            justify-content: flex-start;

            :deep .card_item {
                &:not(:last-child) {
                    margin-right: 20px;
                }

                &:has(.overview_num_box) {
                    width: 20%;
                }

                .overview_box {
                    width: 420px;
                }

                .card_num_list {
                    display: flex;
                    margin-top: 5px;
                }

                .overview_num_box {
                    position: relative;
                    width: 100%;
                    min-width: 200px;

                    .box_wrap {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
            }
        }
    }

    &.env_health_card {
        :deep .card_item_wrap {

            // background: #f00;
            .card_item {
                .overview_num_box {
                    height: 100%;
                }
            }
        }
    }

    /* &.perception_health_card {
        :deep .card_item_wrap {

            .card_item {
                .overview_num_box {
                    height: 47%;

                    &:first-child {
                        margin-bottom: 7px;
                    }

                    .box_wrap {
                        span {
                            margin-left: 3px;
                        }
                    }
                }
            }
        }
    } */
}
</style>